<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <link
      rel="stylesheet"
      href="//unpkg.com/element-plus/theme-chalk/dark/css-vars.css"
    />
    <script src="./vue.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div style="width: 300px">
        <el-input v-model="queryObj.name" placeholder="姓名"></el-input>
        <el-button @click="brandFlag=true,brandList.length?null:getBrandList()"
          >{{queryObj.model||"请选择车型"}}</el-button
        >
        <el-input v-model="queryObj.mileage" placeholder="公里数"></el-input>
        <el-input v-model="queryObj.phone" placeholder="手机"></el-input>
        <el-date-picker
          v-model="queryObj.dateOfRegistration"
          type="month"
          value-format="YYYY-MM"
          placeholder="选择日期"
        ></el-date-picker>
        <el-button @click="submit">提交</el-button>
      </div>
      <pre>{{queryObj}}</pre>

      <!-- 弹窗 -->
      <el-drawer
        v-model="brandFlag"
        title="选择品牌"
        :size="modelFlag?800:500"
        direction="rtl"
      >
        <p
          style="line-height: 50px; cursor: pointer"
          v-for="item in brandList"
          @click="modelFlag=true,getModelList(item.id)"
        >
          {{item.brand}}
        </p>
        <!-- 子抽屉  选择车型 -->
        <el-drawer v-model="modelFlag" title="选择车型" :append-to-body="true">
          <p
            style="line-height: 50px; cursor: pointer"
            v-for="item in modelList"
            @click="queryObj.model=item.series,modelFlag=brandFlag=false"
          >
            {{item.series}}
          </p>
        </el-drawer>
      </el-drawer>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          queryObj: {
            name: "",
            model: "",
            type: "0",
            mileage: "",
            phone: "",
            dateOfRegistration: "",
          },
          brandFlag: false, //控制品牌弹窗的显示
          brandList: [],
          modelFlag: false, //控制车型弹窗的显示
          modelList: [],
        };
      },
      methods: {
        // 请求品牌数据
        async getBrandList() {
          let { data } = await axios.get(
            "https://api.tf2sc.cn/api/tfcar/car/brand300",
            {
              headers: {
                PlatformType: "h5",
              },
            }
          );
          this.brandList = data.data.content;
        },
        // 请求车型数据
        async getModelList(id) {
          let { data } = await axios.get(
            "https://api.tf2sc.cn/api/tfcar/car/series300",
            {
              params: {
                brandId: id,
              },
              headers: {
                PlatformType: "h5",
              },
            }
          );
          this.modelList = data.data.content;
        },
        async submit() {
          // 校验
          if (!/^1[3-9]\d{9}$/.test(this.queryObj.phone)) {
            ElementPlus.ElMessage.error("手机号格式不对");
            return false;
          }
          // 校验通过
          let { data } = await axios({
            method: "post",
            url: "https://api.tf2sc.cn/api/tfcar/car/estimate",
            params: this.queryObj,
            headers: {
              PlatformType: "h5",
            },
          });
          console.log(data);
        },
      },
    });

    // mounted  beforeUnmount
    app = app
      .use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
      })
      .mount("#app");
  </script>
</html>
